import React, { Component } from 'react';
import { Input, List, Switch } from 'antd';

class MethodSetting extends Component {

  constructor (props) {
    super(props);
  }

  formChange = (key, filedKey, value) => {
    const { methods } = this.props;
    methods[key][filedKey] = value;
    this.props.formChange('methods', methods);
  };

  render () {
    const {
      methods = {},
    } = this.props;

    const datasource = [];
    for (const key in methods) {
      const item = methods[key];
      datasource.push({
        key: key,
        ...item,
      });
    }

    return <div style={{ padding: '0 20px' }}>
      <List
        grid={{
          gutter: 16,
          column: 3,
        }}
        dataSource={datasource}
        renderItem={(item, index) => (
          <List.Item key={index}>
            <div style={{ width: '100%' }}>
              <div style={{
                width: '100%',
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                padding: '5px 0',
              }}>
                <div>{item.label}</div>
                <Switch
                  style={{ width: '60px' }}
                  checkedChildren='生成'
                  unCheckedChildren='移除'
                  checked={item.enabled}
                  onChange={checked => this.formChange(item.key, 'enabled', checked)}
                >
                </Switch>
              </div>
              <div>
                <Input
                  placeholder={'例如：findPage'}
                  addonBefore='方法名称:'
                  value={item.name}
                  onChange={e => this.formChange(item.key, 'name', e.target.value)}
                  disabled={!item.enabled}
                />
                <Input
                  placeholder={'例如：/findPage'}
                  style={{ marginTop: '5px' }}
                  addonBefore='请求路径:'
                  value={item.apiPath}
                  onChange={e => this.formChange(item.key, 'apiPath', e.target.value)}
                  disabled={!item.enabled}
                />
              </div>
            </div>
          </List.Item>
        )}
      />
    </div>;
  }

}

export default MethodSetting;
